$main: #1c1c1c;
$second-main: #2c2c2c;
$first: #3e3e3e;
$first-hover: #383838;
$second: #4e4e4e;
$third: #5e5e5e;

$color-first: #c0c4cc;
$color-second: #606266;

$color: #fc803a;

.tryme-theme.dark {
  background-color: $first;
  color: $color;

  .title {
    color: $color;
  }
  .operation-panel {
    background-color: $first;
    border-bottom: 1px solid $second;
  }
  .main-content {
    border-left: 1px solid $second;
  }
  .result-content {
    background-color: $main;
  }
  .direction-area {
    background-color: $second-main;
  }

  // 第三方ui组件

  .el-button--primary {
    background-color: $color;
    border-color: $color;
  }
  // 树形结构
  .el-menu {
    background-color: $first;
  }

  .el-submenu__title,
  .el-menu-item {
    &:hover,
    &:focus {
      background-color: $first-hover;
    }
    &.is-active {
      color: $color;
    }
    color: $color-first;
  }

  .el-tree {
    background-color: $first;
    color: $color-first;
  }
  .el-tree-node__content {
    &:hover {
      background-color: $color-second;
    }
  }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: $color-second;
  }
  // 输入框
  .el-input__inner {
    background-color: $second;
    border: 0px;
  }

  // 垂直分割线
  .ext-splitpanes-theme .splitpanes--vertical > .splitpanes__splitter {
    min-width: 2px;
    background: linear-gradient(0deg, #fc803a, #fc803a);
    opacity: 0.8;
    z-index: 10;
  }
  // 水平分割线
  .ext-splitpanes-theme .splitpanes--horizontal > .splitpanes__splitter {
    min-height: 2px;
    background: linear-gradient(0deg, #fc803a, #fc803a);
    opacity: 0.8;
    z-index: 10;
  }
}
